<template>
	<uni-nav-bar title="车上生活" left-icon="left" @clickLeft="navBack" :fixed="true" statusBar></uni-nav-bar>
	<image :src="orderAll.image" mode="" style="width:100%;height:750rpx;"></image>
	<view class="shopdetail">
		<view style="font-size: 26rpx;">
			蓝宝石：<text style="font-size: 36rpx;color:#5097FB;">{{orderAll.score}}</text>
		</view>
		<view style="font-size: 26rpx;margin:5rpx 0px 10rpx;">
			钱包价格：<text style="font-size: 24rpx;">￥</text><text style="font-size: 36rpx;">{{orderAll.price}}</text>
		</view>
		<view>{{orderAll.name}}</view>
		<!-- <view style="color:#666;font-size: 28rpx;">库存：{{orderAll.stock}}</view> -->
	</view>
	<!-- class="u-content" -->
	<rich-text :nodes="orderAll.content" class="uContent"></rich-text>
	<ShopBottom :orderAll="orderAll" ref="bottom" @submit="init"></ShopBottom>
</template>

<script setup lang="ts">
	import { navBack, navTo } from '@/utils/navigator';
	import { ref } from 'vue';
	import ShopBottom from '@c/reservation/shopBottom';
	import { getGoodsInfo } from '@/gql/gemstone';
	import { toPublish } from '@mqtt';
	import { onLoad, onShow } from '@dcloudio/uni-app';
	import { getDriverID } from '@/stores/driverID';
	/**
	 * 蓝宝石详情页面
	 * @param driver_id  用户ID
	 * @param list  轮播图列表
	 * @param userInfo  用户信息
	 * @param orderAll  蓝宝石全部信息
	 * @param shopID  蓝宝石商品ID
	 */
	const driver_id = getDriverID();
	const orderAll = ref({});
	const shopID = ref('');
	const bottom = ref(null)
	onLoad((pearm) => {
		shopID.value = pearm.id;
	});
	onShow(() => {
		init();
	})
	/**
	 * 初始化蓝宝石信息
	 * @param id  蓝宝石商品ID
	 * @param orderAll  蓝宝石商品详情
	 * @param list  蓝宝石轮播图列表
	 */
	function init() {
		const payload = {
			query: getGoodsInfo,
			variables: {
				id: Number(shopID.value),
				driver_id
			},
		};
		toPublish('ql/score/getGoodsInfo', payload, (obj : any) => {
			const { getGoodsInfo } = obj.data;
			orderAll.value = getGoodsInfo;
			setTimeout(() => {
				bottom.value.init()
			}, 300)
		});
	}
</script>

<style scoped lang="less">
	@import url('../pointsMall/less/integralDetail.less');

	.u-content {
		img {
			width: 100%;
			height: auto;
		}
	}
</style>
<style>
	.uContent>>>img {
		width: 100%;
		height: auto;
	}
</style>